<template>
  <div class="main">
    <dl v-for="item in data" :key="item.id">
      <dt>
        <img :src="item.thumb" alt="" />
        <p class="imgBottom">
          <span>{{ item.minOne.shopName }}</span
          ><span>|{{ Math.floor(item.distance * 1000) }}m</span>
        </p>
      </dt>
      <dd>
        <p class="title">{{ item.title }}</p>
        <p class="price">
          <span>
            <span>¥{{ item.price }}</span>
            <span> ¥{{ Math.floor(item.oldprice) }}</span>
          </span>
          <span>已售{{ item.saled }}</span>
        </p>
        <p class="sort" v-show="item.sub_type == 0">
          {{ item.sub_type > 0 ? "" : item.sort_list[1] }}
        </p>
      </dd>
    </dl>
  </div>
</template>

<script>
import { goodsQuery } from "../../server/shop/shop";
export default {
  data() {
    return {
      data: [],
    };
  },
  mounted() {
    console.log(456);
    goodsQuery({
      cityId: 19,
      latitude: 39.95933151245117,
      longitude: 116.29844665527344,
      pageNo: 1,
      pageSize: 20,
      showSort: 1,
      cityAreaId: 0,
      showSortMode: 1,
      priceFrom: 0,
      priceTo: 300,
      mwAuthToken:
        "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqt1nY0hUNta9hRq21za9H6UYXmpdLdIF3rNSY-BJe8dSyjtwNeGpX-CQ8uF7Ta5STgOM6gTRMjsyKeRzn1THL1HmnqxwxOXKAeILznDd0kQk76KO8HwGuqOwEdLWC2o3hz62dBrm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
      mAuthToken:
        "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqt1nY0hUNta9hRq21za9H6UYXmpdLdIF3rNSY-BJe8dSyjtwNeGpX-CQ8uF7Ta5STgOM6gTRMjsyKeRzn1THL1HmnqxwxOXKAeILznDd0kQk76KO8HwGuqOwEdLWC2o3hz62dBrm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
      fromw: 1401,
    }).then((ok) => {
      if (ok.errNo == 0) {
        console.log(ok);
        this.data = ok.data;
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.main {
  background: #eee;
  width: 96%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: hidden;
  dl {
    width: 48%;
    height: 620rpx;
    background: #fff;
    margin: 20rpx 0;
    border-radius: 30rpx;
    dt {
      width: 100%;
      height: 70%;
      img {
        width: 100%;
        height: 90%;
      }
      .imgBottom {
        position: relative;
        bottom: 40rpx;
        left: 0;
        padding: 15rpx 0;
        font-size: 20rpx;
        display: flex;
        justify-content: space-around;
        background: rgba($color: #000000, $alpha: 0.5);
        color: #fff;
      }
    }
    dd {
      width: 94%;
      margin: 0 auto;
      .title {
        width: 100%;
        height: 80rpx;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .price {
        font-size: 30rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 10rpx 0;
        > span:nth-child(1) {
          > span:nth-child(1) {
            font-weight: 800;
            color: red;
          }
          > span:nth-child(2) {
            list-style: georgian;
            text-decoration: line-through;
            color: #ccc;
          }
        }
        > span:nth-child(2) {
          font-size: 25rpx;
        }
      }
      .sort {
        display: inline-block;
        padding: 0 15rpx;
        font-size: 25rpx;
        background: #A4ACC3;
        border-radius: 20rpx;
        margin-left: 20rpx;
      }
    }
  }
}
</style>